<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
    <link rel="stylesheet" th:href="@{/css/common.css}" />
    <link rel="stylesheet" th:href="@{/css/index.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap.min.css}" />
    <title>中食链-节点投票</title>
</head>
<body style="background: #F5F5F5;">
    <!--头部-->
    <div th:include="~{/client/common/header :: header}"></div>

    <!--banner-->
    <div class="nodeBanner">
        <img th:src="@{/img/node-banner.png}" />
        <a th:href="@{/nodeVote/toVoteRule}" class="a-click"><img th:src="@{/img/node-button.png}" /></a>
    </div>
    <!--投票信息空的时候显示-->
    <div class="null" th:style="'display:' + @{(${nodeVotes == null} ? 'block' : 'none')} + ''"><img th:src="@{/img/node-null.png}"/></div>
    <div class="center"  th:style="'display:' + @{(${nodeVotes != null} ? 'block' : 'none')} + ''">
        <div class="timer">
            距离节点投票倒计时：<span class="joind">55</span>天<span class="joinh">12</span>时<span class="joinm">33</span>分<span class="joins">44</span>秒
            <input type="hidden" id="time" th:value="${time}" />
        </div>
        <div class="affiche">
            <h1>平台公告</h1>
            <div class="notice">
                <ul>
                    <li th:each="news, state: ${newsList}" th:utext="${news.content}"></li>
                </ul>
            </div>
        </div>
        <div class="big-title">节点投票企业</div>
        <div class="node-box">
            <input type="hidden" id="nodeSize" th:value="${size}" />
            <div class="boxDiv" th:each="nodeVote, state: ${nodeVotes}">
                <input name="nodeVoteIds" th:value="${nodeVote.id}" />
                <div class="qye-logo"><a th:href="@{/nodeVote/nodeDetail/} + ${nodeVote.id}"><img th:src="@{/} + ${nodeVote.companyLogo}" alt="" /></a></div>
                <h2 th:text="${nodeVote.companyName}"></h2>
                <div class="progressWrap">
                    <span>支持</span>
                    <div class="progress">
                        <div class="progress-bar blue" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" th:style="'width:' + @{${nodeVote.supportNum*5}+'%'} + ''"></div>
                    </div>
                    <span th:text="${nodeVote.supportNum}"></span>
                </div>
                <div class="progressWrap">
                    <span>反对</span>
                    <div class="progress">

                        <div class="progress-bar green" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" th:style="'width:' + @{${nodeVote.opposeNum*5}+'%'} + ''"></div>
                    </div>
                    <span th:text="${nodeVote.opposeNum}"></span>
                </div>
                <div class="progressWrap">
                    <span>弃权</span>
                    <div class="progress">

                        <div class="progress-bar yellow" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" th:style="'width:' + @{${nodeVote.abstainNum*5}+'%'} + ''"></div>
                    </div>
                    <span th:text="${nodeVote.abstainNum}"></span>
                </div>
                <div class="btnGroup" th:style="'display:' + @{(${observer == true} ? 'block' : 'none')} + ''">
                    <input class="Disabled" disabled="disabled" type="button" th:onclick="'javascript:vote(\''+${nodeVote.id}+'\', \''+1+'\');' " value="支持"/>
                    <input class="Disabled" disabled="disabled" type="button" th:onclick="'javascript:vote(\''+${nodeVote.id}+'\', \''+2+'\');' " value="反对"/>
                    <input class="Disabled" disabled="disabled" type="button" th:onclick="'javascript:vote(\''+${nodeVote.id}+'\', \''+3+'\');' " value="弃权"/>
                </div>
                <div class="btnGroup" th:style="'display:' + @{(${observer == false || null == observer} ? 'block' : 'none')} + ''">
                    <input class="true-btn" type="button" th:onclick="'javascript:vote(\''+${nodeVote.id}+'\', \''+1+'\');' " value="支持"/>
                    <input class="true-btn" type="button" th:onclick="'javascript:vote(\''+${nodeVote.id}+'\', \''+2+'\');' " value="反对"/>
                    <input class="true-btn" type="button" th:onclick="'javascript:vote(\''+${nodeVote.id}+'\', \''+3+'\');' " value="弃权"/>
                </div>
                <div class="explain">您现在是观察员的身份，还不能参加节点的投票</div>
            </div>
        </div>
    </div>

<script th:src="@{/js/jquery.min.js}" ></script>
<script type="text/javascript" th:src="@{/js/vue.js}"></script>
<script th:src="@{/js/public.js}" type="text/javascript" charset="utf-8"></script>
<script th:inline="javascript">
    var basePath = [[@{/}]];
    
    function vote(nodeVoteId, nodeVoteType) {
        $.ajax({
            url: basePath + '/nodeVote/nodeVoting',
            data: {
                nodeVoteId:nodeVoteId,
                nodeVoteType:nodeVoteType
            },
            dataType: "json",
            type: 'POST',
            success: function(data) {
                if (data.success) {
                    window.location.href = basePath + "/nodeVote/nodeVote"
                } else {
//                    $(".error_msg").html(data.message);
                    alert(data.message);
                }
            }
        });
    }

    var setTimer = null;
    var chazhi = 0;
    //差值计算
    //例子(模拟)
//    chazhi = 10 * 86400000;
    //真实时间(注意月份需减掉1，否则时间会计算错误)
    chazhi = (new Date($("#time").val())) - (new Date()); //计算剩余的毫秒数
//    chazhi = (new Date(year,month-1,day,hour,minute,second)) - (new Date()); //计算剩余的毫秒数
    //chazhi = (new Date(2018,8-1,6,6,6,6)) - (new Date());

    //执行函数部分
    countFunc(chazhi);
    setTimer = setInterval(function() {
        chazhi = chazhi - 1000;
        countFunc(chazhi);
    }, 1000);

    function countFunc(leftTime) {
        if(leftTime >= 0) {
            var days = parseInt(leftTime / 1000 / 60 / 60 / 24, 10); //计算剩余的天数
            var hours = parseInt(leftTime / 1000 / 60 / 60 % 24, 10); //计算剩余的小时
            var minutes = parseInt(leftTime / 1000 / 60 % 60, 10); //计算剩余的分钟
            var seconds = parseInt(leftTime / 1000 % 60, 10); //计算剩余的秒数
            days = checkTime(days);
            hours = checkTime(hours);
            minutes = checkTime(minutes);
            seconds = checkTime(seconds);
            $(".joind").html(days);
            $(".joinh").html(hours);
            $(".joinm").html(minutes);
            $(".joins").html(seconds);
        } else {
            clearInterval(setTimer);
            $(".joind").html("00");
            $(".joinh").html("00");
            $(".joinm").html("00");
            $(".joins").html("00");
            if ($("#nodeSize").val() != 0) {
                window.location.href = basePath + "/nodeVote/endVote"
            }
        }
    }

    function checkTime(i) { //将0-9的数字前面加上0，例1变为01
        if(i < 10) {
            i = "0" + i;
        }
        return i;
    }

    $(function () {
        setInterval("noticeUp('.notice ul','-35px',500)", 2000);
    });
    function noticeUp(obj,top,time) {
        $(obj).animate({
            marginTop: top
        }, time, function () {
            $(this).css({marginTop:"0"}).find(":first").appendTo(this);
        })
    }

</script>
</body>
</html>